<template>
    <!-- <h3>主页</h3> -->
    <!-- 02 轮播图 -->
    <section class="my-banner">
        <div class="container">
            <swiper v-if="slides.length != 0" :modules="modules" :autoplay="{ delay: 3000 }" :slides-per-view="1" navigation
                :pagination="{ clickable: true }" :loop="true">
                <swiper-slide v-for="(item) in slides" :key="item.id">
                    <img :src="item.banner_url"
                        :alt="item.banner_title" />
                </swiper-slide>
            </swiper>
        </div>
    </section>

    <!-- 03 图文信息列表 -->
    <section class="my-list">
        <div class="container">
            <div class="row">
                <div 
                class="col-lg-3 col-md-4 col-sm-6" 
                v-for="item in articles"
                >
                    <div class="card" style="width: 100%;">
                        <div class="imgBox">
                            <img :src="item.src"
                            class="card-img-top" :alt="item.src">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title ellipsis-multiline">{{ item.title }}</h5>
                            <p class="card-text ellipsis-multiline" v-html="item.content">
                                
                            </p>
                            <div class="date-time">{{ item.createAt }}</div>
                            <div class="d-flex justify-content-between">
                                <router-link class="btn btn-primary btn-sm" :to="{path:'/detail',query:{id: item.id}}">点击详情</router-link>
                                <span>{{ item.author }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script setup lang="ts">
import { bannerList,articleItems, host } from '@/api/index'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Scrollbar, A11y } from 'swiper/modules';
import 'swiper/swiper-bundle.css';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { ref } from 'vue';
const modules = [Pagination, Scrollbar, A11y]
interface IBanner {
    id:number
    banner_link: string
    banner_title: string
    banner_url: string
    [key:string | number]: string | number
}
const slides = ref<IBanner []>([])

// 获取轮播图数据
const bannerListFn = async ()=> {
    await bannerList().then(
        (resData:any)=>{
            // console.log(resData)
            if(resData.code == 200){
                let {result} =resData;
                // 返回一个整合src图片路径的新数组
                let arr = result.map((item: IBanner)=>{
                    item.banner_url = host+item.banner_url;
                    return item
                })
                 slides.value = arr;
            }
        }
    )
}
bannerListFn();


// 获取文章列表
interface IItem {
    [key:string | number]: string | any 
}
const pageNum = ref<number>(1)//页码
const pageSize = ref<number>(15)//数量
const articles = ref<IItem []>([]);// 数组
const articleItemsFn = async ()=> {
    await articleItems({page_size: pageSize.value, page_num: pageNum.value})
    .then(
         (resData:any)=>{
            // console.log(resData)
            if(resData.code == 200){
                let {data} = resData;
                let arr = data.map((item:IItem)=>{
                    const date = new Date(item.createAt)
                    item.createAt = date.toLocaleDateString()+ " "+(date.toLocaleTimeString())
                    item.src = host+item.src;
                    return item;
                })
                articles.value = arr;
             }
         }
    )
}

articleItemsFn();


</script>



<style lang="less">
@import "../assets/varable.less";

.ellipsis {
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 溢出部分显示为省略号 */
}

.ellipsis-multiline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 限制显示的行数为3行 */
    overflow: hidden;
}


.layout {
    font-family: 吉页大字体简;
    font-size: 16px;

    .swiper {
        width: 100% !important;
        max-height: 300px;

        .swiper-pagination-bullet {
            width: 24px;
            height: 8px;
            border-radius: 8px;
        }

        img {
            width: 100%;
        }
    }

    .card {
        margin-bottom: 20px;
    }

    .card-body {
        p {
            width: 100%;
            color: #666;
            font-weight: normal;
        }

        .date-time {
            color: #333;
            margin-bottom: 15px;
        }
    }
}

.my-list {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .layout {
        .swiper {
            .swiper-pagination-bullet {
                width: 16px;
                height: 6px;
                border-radius: 6px;
            }

            .swiper-pagination-bullet-active {
                background-color: @active-color;
            }
        }
    }
}

@media (max-width: 568px) {
    .my-banner {
        .container {
            width: 100% !important;
            padding: 0;
        }
    }
}
</style>